﻿<div>
    <section class="topic-search">
        <h5><i class="fa fa-fw fa-lg fa-comments"></i>Search topics</h5>
        <div class="well well-sm col-md-9">
            <div class="input-group">
                <input type="hidden" name="status" ng-model="topicSearch.status" />
                <input type="text" placeholder="Search for topics..." id="fa-icon-search" class="form-control input-lg" ng-model="topicSearch.query">
                <span class="input-group-addon"><i class="fa fa-fw fa-lg fa-search"></i></span>
            </div>
            <div class="topic-search-result" ng-show="topicSearch.showSearch">
                <indicator class="fa-2x topic-search-loading" style="color: #2C3742;" show="topicSearch.onSearching"></indicator>
                <p class="topic-search-result-item" ng-class-odd="'odd'" ng-class-even="'even'" ng-repeat="sitem in topicSearch.searchResult" ng-click="chooseSearchItem(sitem,$event)">{{sitem.result}}</p>
                <p class="topic-search-result-item odd" ng-show="topicSearch.showMessage" style="font-weight:bold;">No result</p>
            </div>
        </div>
        <create-topic-box></create-topic-box>
        <div class="clearfix"></div>
    </section>

    <div infinite-scroll='loadMoreTopics()' infinite-scroll-distance='1' infinite-scroll-disabled='topicList.onLoading'>
        <topic-box topic="topic" showdate="showDate(myDate)" ng-repeat="topic in topicList.results" fade-in="800"></topic-box>
    </div>
    <div class="topic-loader" style="text-align: center; width: 100%;" ng-show="topicList.onLoading">
        <indicator class="fa-2x" style="color: #2C3742" show="topicList.onLoading"></indicator>
    </div>
    <!--<div class="alert alert-info alert-block" ng-show="stopLoading">
    <h4 class="alert-heading">Nothing to load more!</h4>
</div>-->
    <div class="alert alert-info alert-block" ng-show="topicList.noResult">
        <h4 class="alert-heading">No Topics found!</h4>
    </div>
</div>
